<template>
  <div class="share-wrapper">
    <component :is="id" @share="onShare" v-bind="params" />
  </div>
</template>

<script>
import { html2Img } from "@/utils/index.js";
import h5Mixin from "./mixins/h5Mixin.vue";
import ShareApp from "./components/ShareApp.vue";
import ShareLearnReport from "./components/ShareLearnReport.vue";
export default {
  mixins: [h5Mixin],
  components: {
    ShareApp,
    ShareLearnReport,
  },
  data() {
    return {
      id: "ShareApp",
      params: {},
    };
  },
  methods: {
    initPage() {
      const { id = "ShareApp" } = this.$route.query;
      const { components } = this.$options;
      if (components[id]) {
        this.id = id;
        this.params = this.$route.query;
      } else this.id = "ShareApp";
    },
    onShare(id, opts) {
      const html = document.getElementById(id);
      this.loading = true;
      html2Img({
        html,
        scale: 2,
        type: "file",
      }).then((file) => {
        // console.log(file);
        this.$api
          .upload({
            file,
          })
          .then((res) => {
            const imgUrl = this.$imgHost + res;
            console.log("imgUrl", imgUrl);
            uni.postMessage({
              data: {
                id,
                imgUrl,
                opts,
              },
            });
            this.onBack();
            console.log(window.location.href);
          })
          .catch((e) => {
            console.log("upload", e);
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.share-wrapper {
  widows: 100%;
  height: 100%;
}
</style>
